<template>
    <div id="Category">
        <div class="header-top">
            <mt-header title="分类">
                <mt-button slot="right" class="mui-icon mui-icon-search" @click.stop="clickLeft">
                  <span class="mui-icon mui-icon-chat" @click.stop="clickRight"></span>
                </mt-button>
            </mt-header>
        </div>
        <div id="categoryContent">
            <ul id="leftCategory">
              <li v-for="(item,key) in leftCategory" :key="key" active-class="active">
                  <router-link :to="item.path" active-class="active">{{item.Name}}</router-link>
              </li>
            </ul>
            <div id="rightCategory">
                <keep-alive>
                  <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      leftCategory: [
        { Name: "批发市场", path: "/fenlei/Pifa" },
        { Name: "上装", path: "/fenlei/Shangzhuang" },
        { Name: "下装", path: "/fenlei/Xiazhuang" },
        { Name: "配饰", path: "/fenlei/Peishi" },
        { Name: "美妆", path: "/fenlei/Meizhuang" }
      ]
    };
  },
  methods: {
    pushView(item, key) {
      this.$router.push({ path: item.path });
    },
    clickLeft() {
      this.$router.push({ path: "/SearchView" });
    },
    clickRight() {
      console.log("信息");
      this.$router.push({ path: "/Messageview" });
    }
  }
};
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
#Category {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header-top {
    width: 100%;
    flex: 5;
    .mui-icon-search:before {
      margin-right: 15px;
    }
    .mint-header {
      height: 63px;
      font-size: 23px;
      background: #c6091b;
    }
  }
  #categoryContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    #leftCategory {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      border-right: 1px solid lightgray;
      li {
        box-sizing: border-box;
        padding: 20px 10px;
      }
    }
    #rightCategory {
      width: 70%;
      height: 100%;
    }
  }
}
</style>
